<template>
  <div class="count">
    <!-- 
        如果想要获取某个真实DOM 我们需要使用ref属性,值是一个名字,未来通过这个名字获取DOM
     -->
    <h1 ref='countRef'>{{count}}</h1>
    <button @click="add">累加</button>
    <button @click="getRef">获取h1ref</button>
  </div>
</template>

<script>
export default {
    name:'Count',
    data(){
        return{
            count:0
        }
    },
    methods:{
        add(){
            this.count++
        },
        getRef(){
            /* 
                在组件实例上有一个$ref属性,是一个对象,对象保存的是模板中书写了ref属性的元素
                可以通过this.$refs.xxx获取,得到一个真实DOM
            */
            console.log(this);
            console.log(this.$refs.countRef);
        }
    }
}
</script>

<style >
    .count{
        background-color: aquamarine;
        height: 200px;
    }
</style>